<template>
	<view>
		<u-navbar title="洗衣卡" :autoBack="true" :safeAreaInsetTop="true" :placeholder="true"
			:bgColor="isNavbar?'rgba(0, 0, 0, 0)':'#fff'"></u-navbar>
		<view class="navbar-bg"></view>
		<view class="card u-p-l-20 u-p-t-44">
			<view class="img-box">
				<u-image :showLoading="true" mode="aspectFill" radius="8rpx" src="@/static/personal/logo.png"
					width="240rpx" height="44rpx">
					<view slot="loading">
						<u-loading-icon></u-loading-icon>
					</view>
				</u-image>
			</view>
			<view class="flex align-center u-m-t-78">
				<view class="u-m-r-32 u-font-24" style="color: #00786C;">账户余额</view>
				<view class="u-font-24" style="color: #00786C;">规则</view>
			</view>
			<view class="u-m-t-28 flex align-center justify-between u-m-r-32">
				<view>
					<text class="u-font-32" style="color: #00786C;">￥</text>
					<text class="text-bold" style="color: #00786C;font-size: 48rpx;">1050.00</text>
				</view>
				<view class="flex align-center">
					<view class="btn-plain">查看明细</view>
					<view class="btn-fill">去消费</view>
				</view>
			</view>
		</view>

		<view class="u-m-t-40 cell-group flex align-center justify-between u-m-r-32">
			<view class="cell cur">
				<view class="flex align-center justify-center u-m-t-40">
					<text class="price">220</text>
					<text class="u-font-28" style="color: #ED4B48;">元</text>
				</view>
				<view class="u-font-24 text999 text-center">售价200元</view>
				<view class="tag">立减20元</view>
			</view>
			<view class="cell ">
				<view class="flex align-center justify-center u-m-t-40">
					<text class="price">220</text>
					<text class="u-font-28" style="color: #ED4B48;">元</text>
				</view>
				<view class="u-font-24 text999 text-center">售价200元</view>
				<view class="tag">立减20元</view>
			</view>
			<view class="cell ">
				<view class="flex align-center justify-center u-m-t-40">
					<text class="price">220</text>
					<text class="u-font-28" style="color: #ED4B48;">元</text>
				</view>
				<view class="u-font-24 text999 text-center">售价200元</view>
				<view class="tag">立减20元</view>
			</view>
		</view>

		<view class="u-m-t-32 vip">
			<view class="text-center vip-title">充值享VIP特权</view>
			<view class="u-m-t-40 flex align-center justify-between">
				<view class="flex align-center flex-direction justify-center">
					<u-icon name="/static/personal/c-czzk.png" size="56rpx"></u-icon>
					<view class="u-font-24 u-m-t-10" style="color: #693510;">充值折扣</view>
					<view class="u-font-20 u-m-t-10" style="color: #B1A89F;">立减20元</view>
				</view>
				<view class="flex align-center flex-direction justify-center">
					<u-icon name="/static/personal/c-czzj.png" size="56rpx"></u-icon>
					<view class="u-font-24 u-m-t-10" style="color: #693510;">充值增券</view>
					<view class="u-font-20 u-m-t-10" style="color: #B1A89F;">赠1张优惠券</view>
				</view>
				<view class="flex align-center flex-direction justify-center">
					<u-icon name="/static/personal/c-zzbs.png" size="56rpx"></u-icon>
					<view class="u-font-24 u-m-t-10" style="color: #693510;">专属标识</view>
					<view class="u-font-20 u-m-t-10" style="color: #B1A89F;">VIP标识</view>
				</view>
				<view class="flex align-center flex-direction justify-center">
					<u-icon name="/static/personal/c-zztd.png" size="56rpx"></u-icon>
					<view class="u-font-24 u-m-t-10" style="color: #693510;">专属通道</view>
					<view class="u-font-20 u-m-t-10" style="color: #B1A89F;">会员专属服务</view>
				</view>
				<view class="flex align-center flex-direction justify-center">
					<u-icon name="/static/personal/c-shbz.png" size="56rpx"></u-icon>
					<view class="u-font-24 u-m-t-10" style="color: #693510;">售后保障</view>
					<view class="u-font-20 u-m-t-10" style="color: #B1A89F;">优先处理</view>
				</view>
			</view>
		</view>

		<view class="u-m-t-40 u-m-l-32 text-bold">洗衣卡规则</view>
		<view class="u-m-t-24 u-m-l-32 u-m-r-32" style="color: #666666;line-height: 45rpx;">
			购卡方式：洗衣卡支持您自己充值和赠送好友两种方式；点击【充值.享权益】，付款后金额（付款金额+赠送金额）与对应会员权益将自动充值到您当前登录手机号账户；点击【赠送好友】，付款后您可以将兑换卡密及链接分享至您的好友，好友点击兑换后即可生效，会员权益将同时发放至好友账户；
		</view>
		<view class="u-m-t-24 u-m-l-32 u-m-r-32" style="color: #666666;line-height: 45rpx;">
			使用规则：目前洗衣卡余额长期有效；您可选择丰巢智能柜小程序/APP/公众号等渠道进入选择洗衣服务，在下单页选择“洗衣卡余额”进行支付；
		</view>
		<view class="u-m-t-24 u-m-l-32 u-m-r-32" style="color: #666666;line-height: 45rpx;">
			查询明细：您可通过“查看明细”查询消费记录，“充值记录”查询充值记录；"小程序/APP-我的-优惠券"查询权益发放记录；
		</view>

		<view style="height: 180rpx;"></view>

		<view class="footer">
			<view @click="$u.route('/pages/personal/balance/balance')"
				class="flex align-center justify-center flex-direction">
				<u-icon name="/static/personal/r-record.png"></u-icon>
				<view class="u-font-24 u-m-t-10" style="color: #282828;">充值记录</view>
			</view>
			<view class="btn-lg">点击充值·享权益</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isNavbar: true,
			}
		},
		methods: {

		},
		onPageScroll(e) {
			if (e.scrollTop > 20) {
				this.isNavbar = false;
			} else {
				this.isNavbar = true;
			}
		}
	}
</script>

<style>
	page {
		background: #F8F9FD;
	}
</style>
<style lang="scss">
	.navbar-bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: -1;
		width: 750rpx;
		height: 256rpx;
		background: linear-gradient(90deg, #C8CDFF 0%, #CBFFFA 54%, #FF5B00 100%);
		filter: blur(50rpx);
	}

	.card {
		margin-left: 32rpx;
		margin-right: 32rpx;
		width: 686rpx;
		height: 324rpx;
		background: linear-gradient(90deg, #B3F2EB 0%, #FF5B00 100%);
		border-radius: 48rpx 48rpx 0px 0px;
		opacity: 1;
		border: 2rpx solid rgba(255, 255, 255, 0.7);

		.img-box {
			width: 240rpx;
			height: 44rpx;
		}

		.btn-plain {
			width: 136rpx;
			height: 54rpx;
			line-height: 54rpx;
			text-align: center;
			border-radius: 32rpx;
			border: 2rpx solid #FF5B00;
			color: #00786C;
			font-size: 24rpx;
			margin-right: 32rpx;
		}

		.btn-fill {
			width: 136rpx;
			height: 54rpx;
			line-height: 54rpx;
			background: #FFFFFF;
			border-radius: 32rpx;
			color: #00786C;
			text-align: center;
		}
	}

	.cell-group {
		margin-left: 32rpx;

		.cell {
			position: relative;
			width: 216rpx;
			height: 228rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			border: 4rpx solid #EEEEEE;
			overflow: hidden;

			.price {
				font-size: 40rpx;
				color: #ED4B48;
				font-weight: 800;
			}

			.tag {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				width: 208rpx;
				height: 58rpx;
				line-height: 58rpx;
				text-align: center;
				background: #FEECEA;
				border-radius: 0px 0px 12rpx 12rpx;
				color: #ED4B48;
				font-size: 24rpx;
			}
		}

		.cur {
			border: 4rpx solid #ED4B48;
		}
	}

	.vip {
		width: 686rpx;
		min-height: 254rpx;
		background: #FBFAF6;
		border-radius: 16rpx;
		margin-left: 32rpx;
		margin-right: 32rpx;
		padding: 28rpx 20rpx 20rpx 20rpx;

		.vip-title {
			color: #693510;
			font-weight: 800;
		}
	}

	.footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 22rpx 32rpx;
		background-color: #FFFFFF;

		.btn-lg {
			width: 344rpx;
			height: 84rpx;
			line-height: 84rpx;
			text-align: center;
			background: #FF5B00;
			border-radius: 8rpx;
			color: #FFFFFF;
		}
	}
</style>